<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/reveal.css" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <header></header>
    <div class="nav_main"></div>
    <div class="present-view">
        <div class="nav_left">
            <p data-toggle="collapse" data-target="#nav-left-link">信息披露
                <span class="caret"></span>
            </p>
            <div id="nav-left-link" class="panel-collapse collapse in">
                <a href="present.html">公司介绍</a>
                <a href="scale.html">平台规模</a>
                <a href="management.html">风控措施</a>
                <a href="legend.html" class="active">客户借款</a>
                <a href="circulate.html">借还情况</a>
            </div>
        </div>
        <div class="legend-content-view content-view">
            <h4 class="view-title">前十大客户借款情况</h4>
            <table class="table table-bordered table-striped text-center">
                <tbody>
                    <tr>
                        <td rowspan="2" colspan="2" class="legend-name">客户</td>
                        <td colspan="2" style="background-color:#3aa1ff;color:white">期末数</td>
                        <td colspan="2" style="background-color:#4ecb73;color:white">上年同期数</td>
                    </tr>
                    <tr>
                        <td class="legend-money">实际借款本金</td>
                        <td>
                            <p>未偿还本金占全部</p>
                            <p>借款本金余额比例</p>
                        </td>
                        <td class="legend-money">实际借款本金</td>
                        <td>
                            <p>未偿还本金占全部</p>
                            <p>借款本金余额比例</p>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">阿萨德</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                    </tr>
                    <tr>
                        <td colspan="2">阿萨德</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                    </tr>
                    <tr>
                        <td colspan="2">阿萨德</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                    </tr>
                    <tr>
                        <td colspan="2">阿萨德</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                    </tr>
                    <tr>
                        <td colspan="2">阿萨德</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                    </tr>
                    <tr>
                        <td colspan="2">阿萨德</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                    </tr>
                    <tr>
                        <td colspan="2">阿萨德</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                    </tr>
                    <tr>
                        <td colspan="2">阿萨德</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                    </tr>
                    <tr>
                        <td colspan="2">阿萨德</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                    </tr>
                    <tr>
                        <td colspan="2">阿萨德</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                        <td>12,1234,12元</td>
                        <td>8%</td>
                    </tr>
                </tbody>
            </table>
            <!-- <div id="proportion" style="width:885px;height:570px"></div> -->
            <h4 class="view-title">平台借余额分布情况</h4>
            <div id="distribution1" style="width:440px;height:570px"></div>
            <div id="distribution2" style="width:440px;height:570px"></div>
            <h4 class="view-title">地区分布情况</h4>
            <div id="map" style="widows: 885px;height: 440px"></div>
        </div>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/examples/vendors/echarts/map/js/china.js?_v_=1519819816100"></script>
    <script>
        // var proportion = echarts.init(document.getElementById("proportion"));
        var distribution1 = echarts.init(document.getElementById("distribution1"));
        var distribution2 = echarts.init(document.getElementById("distribution2"));
        var map = echarts.init(document.getElementById("map"));
        var proportion_option = {
            title: {
                text: "余额比例",
                textStyle: {
                    fontWeight: "bold"
                },
                padding: [0, 0, 0, 5],
            },
            tooltip: {

            },
            xAxis:
                {
                    show: "flase",
                    type: 'category',
                    data: ['1千-5千', '6千-1万', '1万-2万', '1万-2万', '1万-2万', '1万-2万', '11万-12万', '12万-13万', '13万-14万', '14万-15万', '16万-17万', '18万以上'],
                    axisPointer: {
                        type: 'shadow'
                    }
                },
            yAxis: [
                {
                    type: 'value',
                    name: '比例',
                    min: 0,
                    max: 250,//最大百分比
                    axisLabel: {
                        formatter: '{value} %'
                    }
                },
                {
                    type: 'value',
                    name: '数值',
                    min: 0,
                    max: 25,//最大值
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                }
            ],
            series: [
                {
                    name: '实际借款本金',
                    type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name: '未偿还本金比例',
                    type: 'bar',
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                    name: '实际借款本金',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                },
                {
                    name: '未偿还本金比例',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        }
        var distribution1_option = {
            title: {
                text: "借款按到期日分布情况",
                left: "19%",
                top: "60%"
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                top: "bottom",
                left: "left"
            },
            series: {
                type: 'pie',
                radius: '55%',
                center: ['40%', '30%'],
                label: {
                    normal: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    { value: 21, name: "一个月内到期" },
                    { value: 13, name: "1-3个月" },
                    { value: 13, name: "3-6个月" },
                    { value: 9, name: "6-12个月" },
                    { value: 18, name: "1-2年" },
                    { value: 13, name: "2-3年" },
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        }
        var distribution2_option = {
            title: {
                text: "担保方式分布情况",
                left: "19%",
                top: "60%"
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                top: "bottom",
                left: "20%"
            },
            series: {
                type: 'pie',
                radius: '55%',
                center: ['40%', '30%'],
                label: {
                    normal: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    { value: 21, name: "信用借款" },
                    { value: 13, name: "保证担保借款" },
                    { value: 13, name: "信用保证保险借款" },
                    { value: 9, name: "融资性担保公司担保借款" },
                    { value: 18, name: "其他第三方保证担保借款" },
                    { value: 13, name: "抵押借款" }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        }
        var map_option = {
            tooltip: {
                formatter: "{b} : {c} %"
            },
            visualMap: {
                min: 0,
                max: 100,
                left: 'left',
                top: 'bottom',
                inRange: {
                    color: ['#e0ffff', '#006edd']
                },
                calculable: true
            },
            geo: {
                map: 'china'
            },
            series: [
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                },
                {
                    type: 'map',
                    geoIndex: 0,
                    data: [
                        { name: '北京', value: 12 },
                        { name: '天津', value: 99 },
                        { name: '上海', value: 13 },
                        { name: '重庆', value: 28 },
                        { name: '河北', value: 1 },
                        { name: '河南', value: 50 },
                        { name: '云南', value: 31 },
                        { name: '辽宁', value: 2 },
                        { name: '黑龙江', value: 7 },
                        { name: '湖南', value: 60 },
                        { name: '安徽', value: 61 },
                        { name: '山东', value: 18 },
                        { name: '新疆', value: 1 },
                        { name: '江苏', value: 1 },
                        { name: '浙江', value: 1 },
                        { name: '江西', value: 1 },
                        { name: '湖北', value: 1 },
                        { name: '广西', value: 2 },
                        { name: '甘肃', value: 0 },
                        { name: '山西', value: 0 },
                        { name: '内蒙古', value: 0 },
                        { name: '陕西', value: 0 },
                        { name: '吉林', value: 0 },
                        { name: '福建', value: 0 },
                        { name: '贵州', value: 0 },
                        { name: '广东', value: 42 },
                        { name: '青海', value: 70 },
                        { name: '西藏', value: 0 },
                        { name: '四川', value: 0 },
                        { name: '宁夏', value: 0 },
                        { name: '海南', value: 0 },
                        { name: '台湾', value: 0 },
                        { name: '香港', value: 0 },
                        { name: '澳门', value: 0 }
                    ]
                }
            ]
        }
        // proportion.setOption(proportion_option)
        distribution1.setOption(distribution1_option)
        distribution2.setOption(distribution2_option)
        map.setOption(map_option)
    </script>
</body>

</html>